import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Button, Toast} from 'antd-mobile';

class AppDownload extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isWeixin: /MicroMessenger/i.test(navigator.userAgent),
            wxtipStyle: {display: 'none'},
            appName: '',
            corporateName: '',
            appIoc: '',
            appIocUrl: '',
            androidUri: '',
            iosUri: ''
        }
    }

    componentDidMount() {
        let id = getUrlParam('id');
        if (!id) {
            Toast.fail('数据错误。请稍后再试 !!!', 2);
            return;
        }
        postJson("/api/v2/update/anon/queryAppUpdateQR", {
            id: id
        }, (data) => {
            this.setState({
                appName: data.appName,
                corporateName: data.corporateName,
                appIoc: data.appIoc,
                appIocUrl: data.appIocUrl,
                androidUri: data.androidUri,
                iosUri: data.iosUri
            });
            Toast.hide();
        }, () => {
            Toast.hide();
            Toast.fail('获取数据失败!!!', 2);
        });
    }

    android() {
        if (this.state.isWeixin) {
            this.setState({
                wxtipStyle: {display: 'block'}
            })
        } else {
            window.location = this.state.androidUri;
        }
    }

    iphone() {
        window.location = this.state.iosUri;
    }

    weixinTipHide() {
        if (this.state.isWeixin) {
            this.setState({
                wxtipStyle: {display: 'none'}
            })
        }
    }

    loadingToast() {
        Toast.loading('正在获取数据...', 0);
    }


    render() {
        return (<div>
                <div className="main-content">
                    <div className="main-content-wrap">
                        <div style={{width: '80%', textAlign: 'center'}}>
                            <div>
                                {this.state.appIocUrl ? <img src={this.state.appIocUrl} style={{width: '50%'}}/> : ''}
                            </div>
                            <br/><br/>
                            <div className="app-name">{this.state.appName}</div>
                            <br/><br/><br/><br/>
                            <div>
                                <Button
                                    type="primary"
                                    size="large"
                                    style={{backgroundColor: '#F9A31C'}}
                                    icon={<img src={'/pages/mobile/appupdate/android.png'} alt=""/>}
                                    onClick={() => this.android()}>
                                    <div style={{lineHeight: '23px'}}>
                                        <div>Android 下载</div>
                                    </div>
                                </Button>
                                <br/>
                                <br/>
                                <Button
                                    type="primary"
                                    size="large"
                                    icon={<img src="/pages/mobile/appupdate/iphone.png" alt=""/>}
                                    onClick={() => this.iphone()}>
                                    <div style={{lineHeight: '23px'}}>
                                        <div>iPhone 下载</div>
                                    </div>
                                </Button>
                            </div>
                        </div>
                    </div>

                    <div className="wxtip" style={this.state.wxtipStyle} onClick={() => this.weixinTipHide()}>
                        <span className="wxtip-icon"/>
                        <p className="wxtip-txt">点击右上角<br/>选择在浏览器中打开</p>
                    </div>
                </div>
                <style>
                    {
                        `
                        .main-content {
                            position: fixed;
                            top: 0;
                            right: 0;
                            left: 0;
                            bottom: 0;
                            height: 90%;
                        }

                        .main-content-wrap {
                            position: fixed;
                            overflow: auto;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            left: 0;
                            height: 90%;
                            -webkit-overflow-scrolling: touch;
                            outline: 0;
                            display: -webkit-box;
                            display: -webkit-flex;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-align: center;
                            -webkit-align-items: center;
                            -ms-flex-align: center;
                            align-items: center;
                            -webkit-box-pack: center;
                            -webkit-justify-content: center;
                            -ms-flex-pack: center;
                            justify-content: center;
                        }

                        .app-name {
                            font-size: 21px;
                            color: #3094cf;
                            padding-left: 15px;
                            padding-right: 15px;
                        }

                        .wxtip{
                            background: rgba(0,0,0,0.8);
                            text-align: center;
                            position: fixed;
                            left:0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            z-index: 998;
                            display: none;
                        }
                        .wxtip-icon{
                            width: 52px;
                            height: 67px;
                            background: url(/pages/mobile/appupdate/weixin-tip.png) no-repeat;
                            display: block;
                            position: absolute;
                            right: 20px;
                            top: 20px;
                        }
                        .wxtip-txt{
                            margin-top: 107px;
                            color: #fff;
                            font-size: 21px;
                            line-height: 1.5;
                        }
                       `
                    }
                </style>
            </div>
        );
    }
}

ReactDOM.render(
    (<AppDownload/>),
    document.getElementById('root')
);